<template>
  <main
    class="w-full min-h-screen bg-gradient-to-br from-purple-500 via-blue-500 to-indigo-900 overflow-x-hidden relative">
    <!-- 顶部介绍 -->
    <section
      class="relative z-10 flex flex-col lg:flex-row items-center justify-between py-20 px-4 lg:px-24 animate-fade-in-up">
      <div class="flex-1 text-center lg:text-left">
        <h1 class="text-5xl lg:text-7xl font-extrabold text-indigo-900 mb-6 animate-gradient-text">关于我们</h1>
        <p class="text-xl lg:text-2xl text-gray-900 mb-10 animate-fade-in">{{ aboutData?.title }}</p>
      </div>
      <img v-if="aboutData?.logo" :src="aboutData.logo" alt="logo"
        class="w-36 h-36 lg:w-56 lg:h-56 rounded-full shadow-2xl animate-rotate-slow border-8 border-indigo-100" />
    </section>
    <!-- 企业简介 -->
    <section class="relative z-10 py-16 px-4 lg:px-24 bg-white animate-fade-in-up">
      <h2 class="text-3xl font-bold text-center text-indigo-600 mb-8 animate-fade-in">企业简介</h2>
      <div class="max-w-3xl mx-auto text-gray-700 text-lg leading-relaxed animate-fade-in">
        {{ aboutData?.intro }}
      </div>
    </section>
    <!-- 愿景使命 -->
    <section class="relative z-10 py-16 px-4 lg:px-24 bg-gradient-to-r from-indigo-50 to-purple-50 animate-fade-in-up">
      <h2 class="text-3xl font-bold text-center text-indigo-600 mb-8 animate-fade-in">愿景与使命</h2>
      <div class="flex flex-col lg:flex-row gap-10 max-w-4xl mx-auto animate-fade-in">
        <div
          class="flex-1 bg-white rounded-xl shadow-lg p-8 text-center hover:scale-105 transition-transform animate-fade-in-up"
          v-for="(item, index) in aboutData?.visionMission" :key="index">
          <h3 class="text-xl font-semibold text-indigo-500 mb-2">{{ item.title }}</h3>
          <p>{{ item.content }}</p>
        </div>
        <!-- <div
          class="flex-1 bg-white rounded-xl shadow-lg p-8 text-center hover:scale-105 transition-transform animate-fade-in-up">
          <h3 class="text-xl font-semibold text-indigo-500 mb-2">企业使命</h3>
          <p>用科技创新驱动企业成长与社会进步</p>
        </div> -->
      </div>
    </section>
    <!-- 发展历程 -->
    <section class="relative z-10 py-16 px-4 lg:px-24 bg-white animate-fade-in-up">
      <h2 class="text-3xl font-bold text-center text-indigo-600 mb-8 animate-fade-in">发展历程</h2>
      <div class="flex flex-col lg:flex-row gap-10 max-w-4xl mx-auto animate-fade-in">
        <div class="flex-1">
          <ul class="timeline timeline-vertical">
            <li class="mb-8 animate-fade-in-up" v-for="(item, index) in aboutData?.milestones" :key="index">
              <div class="timeline-dot bg-indigo-400"></div>
              <div class="timeline-content bg-indigo-50 rounded-lg p-4 shadow-md" :class="item.textColor">
                <span class="font-bold text-indigo-600">{{ item.year }}</span> {{ item.title
                }}, {{ item.content }}
              </div>
            </li>
            <!-- <li class="mb-8 animate-fade-in-up">
              <div class="timeline-dot bg-purple-400"></div>
              <div class="timeline-content bg-purple-50 rounded-lg p-4 shadow-md">
                <span class="font-bold text-purple-600">2020</span> 推出智能营销平台，服务客户突破百家
              </div>
            </li>
            <li class="mb-8 animate-fade-in-up">
              <div class="timeline-dot bg-blue-400"></div>
              <div class="timeline-content bg-blue-50 rounded-lg p-4 shadow-md">
                <span class="font-bold text-blue-600">2023</span> 获得多项行业荣誉，团队规模持续壮大
              </div>
            </li> -->
          </ul>
        </div>
      </div>
    </section>
    <!-- 企业文化 -->
    <section class="relative z-10 py-16 px-4 lg:px-24 bg-gradient-to-r from-indigo-50 to-purple-50 animate-fade-in-up">
      <h2 class="text-3xl font-bold text-center text-indigo-600 mb-8 animate-fade-in">企业文化</h2>
      <div class="flex flex-wrap justify-center gap-8 animate-fade-in">
        <div
          class="bg-white rounded-xl shadow-lg p-8 w-64 text-center hover:scale-105 transition-transform animate-fade-in-up"
          v-for="(item, index) in aboutData?.cultures" :key="index">
          <h3 class="text-lg font-semibold text-indigo-500 mb-2" :class="item.textColor">{{ item.title }}</h3>
          <p>{{ item.content }}</p>
        </div>
        <!-- <div
          class="bg-white rounded-xl shadow-lg p-8 w-64 text-center hover:scale-105 transition-transform animate-fade-in-up">
          <h3 class="text-lg font-semibold text-indigo-500 mb-2">协作</h3>
          <p>团队合作，共创价值</p>
        </div>
        <div
          class="bg-white rounded-xl shadow-lg p-8 w-64 text-center hover:scale-105 transition-transform animate-fade-in-up">
          <h3 class="text-lg font-semibold text-indigo-500 mb-2">诚信</h3>
          <p>以诚为本，信守承诺</p>
        </div>
        <div
          class="bg-white rounded-xl shadow-lg p-8 w-64 text-center hover:scale-105 transition-transform animate-fade-in-up">
          <h3 class="text-lg font-semibold text-indigo-500 mb-2">共赢</h3>
          <p>客户至上，合作共赢</p>
        </div> -->
      </div>
    </section>
  </main>
</template>

<script setup lang="ts">
const { getAboutData } = useAboutApi()
// 使用useHead来设置页面的SEO信息
useHead({
  title: '关于我们',
  meta: [
    { name: 'description', content: '了解我们公司的发展历程和团队介绍' },
    // 以下是增强SEO的推荐标签
    { name: 'keywords', content: '公司,团队,发展历程' },
    { property: 'og:title', content: '关于我们' }, // 社交媒体分享标题
    { property: 'og:description', content: '了解我们公司的发展历程和团队介绍' },
    { property: 'og:image', content: 'https://example.com/share-about.jpg' }
  ],
  link: [
    { rel: 'canonical', href: 'https://example.com/about' } // 防止重复内容
  ]
})

const aboutData = ref()
onMounted(async () => {
  try {
    aboutData.value = await getAboutData()
    console.log('关于我们数据:', aboutData.value)
  } catch (error) {
    console.error('获取关于我们数据失败:', error)
  }
})
</script>

<style scoped>
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 1s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 1.2s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes rotate-slow {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animate-rotate-slow {
  animation: rotate-slow 8s linear infinite;
}

@keyframes gradient-text {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

.animate-gradient-text {
  background-color: #fff;
  /* background: linear-gradient(90deg, #ddceed 0%, #6366f1 50%, #a5b4fc 100%);  */
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-text 3s linear infinite alternate;
}

/* 时间轴样式 */
.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline-dot {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  position: absolute;
  left: -0.75rem;
  top: 0.5rem;
  z-index: 10;
}

.timeline-content {
  margin-left: 1.5rem;
}

.timeline li {
  position: relative;
}

.timeline li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -0.125rem;
  top: 2.25rem;
  width: 0.25rem;
  height: 3rem;
  background: #e0e7ff;
  z-index: 1;
  border-radius: 0.125rem;
}
</style>